<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/login -->
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="align-center justify-center pos-rel">
				<image class="pos-abs" @click="backpage" src="@/static/images/login/leftjt.png" alt=""
					style="width: 48rpx;height: 48rpx;left: 0;"></image>
				<view class=" fz36">
					完善个人资料
				</view>
			</view>
			<view class=" flex-col align-center" style="margin-top: 86rpx;">
				<image :src="avatar" style="width: 152rpx;height: 152rpx;border-radius: 50%;"></image>
				<view class="fz24" style="color: #576260;margin-top: 27rpx;">
					只支持JPG、JPEG或PNG格式的图片文件
				</view>
				<view class="fz36 justify-center align-center" @click="totx"
					style="border-radius: 98rpx;;margin-top: 27rpx;border:1rpx solid #00D9B2; color: #00D9B2;width: 192rpx;height: 68rpx;">
					更改头像
				</view>
			</view>

			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				昵称
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput v-model="areaform.userName" :placeholderStyle="placeholderStyle"
					placeholder="请输入昵称"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 56rpx;color: #7E8987;">
				您所在省
			</view>
			<view class="fz32 selectbox flex-row justify-between align-center" @click="economizeshow = true"
				style="margin-top: 8rpx;">
				<view :style="{color:economize?'#303B39':'#7E8987'}">
					{{ economize?economize:'请选择您所在省'}}
				</view>
				<!-- <uni-easyinput @focus="show = true"  v-model="name" :placeholderStyle="placeholderStyle" placeholder="请选择您所在省"></uni-easyinput> -->
				<u-select v-model="economizeshow" mode="single-column" :list="economizelist"
					@confirm="confirmeconomize"></u-select>
				<image src="@/static/images/login/down.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>

			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 56rpx;color: #7E8987;">
				您所在市
			</view>
			<view class="fz32 selectbox flex-row justify-between align-center" @click="marketshow = true"
				style="margin-top: 8rpx;">
				<view :style="{color:market?'#303B39':'#7E8987'}">
					{{ market?market:'请选择您所在市'}}
				</view>
				<!-- <uni-easyinput @focus="show = true"  v-model="name" :placeholderStyle="placeholderStyle" placeholder="请选择您所在省"></uni-easyinput> -->
				<u-select v-model="marketshow" mode="single-column" :list="marketlist"
					@confirm="marketconfirm"></u-select>
				<image src="@/static/images/login/down.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 56rpx;color: #7E8987;">
				性别
			</view>
			<view class="fz32 selectbox flex-row justify-between align-center" @click="sexshow = true"
				style="margin-top: 8rpx;">
				<view :style="{color:sex?'#303B39':'#7E8987'}">
					{{ sex?sex:'请选择您的性别'}}
				</view>
				<!-- <uni-easyinput @focus="show = true"  v-model="name" :placeholderStyle="placeholderStyle" placeholder="请选择您所在省"></uni-easyinput> -->
				<u-select v-model="sexshow" mode="single-column" :list="sexlist"
					@confirm="sexconfirm"></u-select>
				<image src="@/static/images/login/down.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 56rpx;color: #7E8987;">
				选择科目疾病
			</view>
			<view class="fz32 selectbox flex-row justify-between align-center" @click="toselsub"
				style="margin-top: 8rpx;">
				<view :style="{color:subname?'#303B39':'#7E8987'}">
					{{ disname?subname+'-'+disname:subname?subname:'请选择科目疾病'}}
				</view>
				<image src="@/static/images/login/down.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			
			<view class="align-center loginbtn justify-between">
				<button class="button fwbold" :style="{opacity:areaform.userName.length>0?'1':'0.5'}"
					:disabled="areaform.userName.length>0?false:true" type="primary" @click="next">下一步</button>
			</view>
		</view>
		<u-toast ref="uToast" />


	</view>
</template>

<script>
	import {
		getAreas
	} from '@/api/api.js'
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import store from "@/store"
	export default {
		onLoad() {
			// 获得屏幕最大高度
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
		},
		data() {
			return {
				maxHeight: '',
				phone: '',
				placeholderStyle: "color:#7E8987;font-size:32rpx",
				// avatar: '/static/images/login/logo.png',
				avatar: store.getters.avatar ? store.getters.avatar : '/static/images/login/logo.png',
				action: config.baseUrl + '/system/user/profile/avatar',
				economizeshow: false,
				economize: '',
				economizelist: [],
				marketshow: false,
				market: '',
				marketlist: [],
				sexshow: false,
				sex: '',
				sexlist: [{label:'男',value:0},{label:'女',value:1}],
				subname: '',
				disname: '',
				areaform: {
					userName: '',
					provinceId: null,
					cityId: null,
					departmentId: null,
					diseaseId: null,
					sexType:null,
				}

			}
		},
		onShow() {
			uni.$on('returnData', (data) => {
				//触发更新后
				this.changeid(data)
			})
			uni.$on('returnavatar', () => {
				//触发更新后
				this.changeavatar()
			})
		},
		created() {
			uni.$on('uAvatarCropper', path => {
				console.log(path)
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.action,
					file: path,
					header: {
						authorization: 'Bearer ' + getToken()
					},
					name: 'avatarfile',
					complete: (res) => {
						// let obj = JSON.parse(res.data)
						// this.areaform.avatar = obj.url
					}
				});
			})
		},
		mounted() {
			this.getAreas()
		},
		methods: {
			changeavatar(){
				this.avatar = store.getters.avatar
			},
			totx() {
				uni.navigateTo({
					url: '/pages/mine/avatar/index'
				})
			},
			changeid(obj) {
				console.log('取出来了么', obj)
				this.areaform.departmentId = obj.subid
				this.areaform.diseaseId = obj.disid
				this.subname = obj.subname
				this.disname = obj.disname
			},
			confirmeconomize(e) {
				this.economize = e[0].label
				this.areaform.provinceId = e[0].value
				this.market = ''
				let result = this.economizelist.filter(item => item.districtId === e[0].value);
				let arr = result[0].subordinates
				arr.forEach(item => {
					item.label = item.districtName
					item.value = item.districtId
				})
				this.marketlist = arr
			},
			toselsub() {
				uni.navigateTo({
					url: '/pages/knowledge/disease?setarea=1'
				})
			},
			marketconfirm(e) {
				this.market = e[0].label
				this.areaform.cityId = e[0].value
			},
			sexconfirm(e) {
				this.sex = e[0].label
				this.areaform.sexType = e[0].value
			},
			getAreas() {
				getAreas().then(res => {
					let arr = res.rows
					arr.forEach(item => {
						item.label = item.districtName
						item.value = item.districtId
					})
					this.economizelist = arr
				})
			},
			next: function(e) {
				if (this.economize.length == 0) {
					this.$refs.uToast.show({
						title: '请选择省份',
					})
					return
				} else if (this.market.length == 0) {
					this.$refs.uToast.show({
						title: '请选择市区',
					})
					return
				} else {
					store.commit("other/SET_AREAFORM", this.areaform)
					uni.navigateTo({
						url: `/pages/login/setother`
					});
				}
			},
			showToast() {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					url: '/pages/user/index'
				})
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}

	::v-deep .uni-icons {
		font-size: 52rpx !important;
	}

	::v-deep uni-toast {
		font-size: 24rpx;
	}

	.pagebody {
		box-sizing: border-box;
		background-image: url('/static/images/login/otherbg.png');
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;

		.topbgbox {
			// position: relative;
			// height: 9.2100rpx;
			box-sizing: border-box;
			padding: 14rpx 40rpx 0;


			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 10rpx;
			}

			.selectbox {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px solid #B8C3C1;
			}

			.loginbtn {
				// position: absolute;
				// bottom: 0;
				margin-top: 96rpx;

				uni-button {
					border-radius: 98rpx;
					width: 668rpx;
				}

				uni-button:after {
					border: none;
				}

				.button {
					background-color: #00D9B2;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;

				}
			}
		}

	}
</style>